<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700%7CRoboto:400,700" rel="stylesheet">
    <link href='style.css' rel='stylesheet' type='text/css'>
    <title>LeftValues Quiz</title>
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="shortcut icon" type="image/png" href="icon.png">
    <meta charset="utf-8">
</head>

<body>
    <script type="application/javascript" src="questions.js">
    </script>
    <h1>LeftValues</h1>
    <select id="langPicker"></select>
    <hr>
    <h2 data-i18n="quiz_loading" style="text-align:center;" id="question-number">Loading...</h2>
    <p class="question" id="question-text"></p>
    <button data-i18n="quiz_strongly_agree" class="button" onclick="nextQuestion( 1.0)"
        style="background-color: #1b5e20;">Strongly Agree</button> <br>
    <button data-i18n="quiz_agree" class="button" onclick="nextQuestion( 0.5)"
        style="background-color: #4caf50;">Agree</button> <br>
    <button data-i18n="quiz_neutral" class="button" onclick="nextQuestion( 0.0)"
        style="background-color: #bbbbbb;">Neutral/Unsure</button> <br>
    <button data-i18n="quiz_disagree" class="button" onclick="nextQuestion(-0.5)"
        style="background-color: #f44336;">Disagree</button> <br>
    <button data-i18n="quiz_strongly_disagree" class="button" onclick="nextQuestion(-1.0)"
        style="background-color: #b71c1c;">Strongly Disagree</button> <br>
    <button data-i18n="quiz_back" class="small_button" onclick="prevQuestion()" id="back_button">Back</button>
    <button data-i18n="quiz_back" class="small_button_off" id="back_button_off">Back</button>
    <br>

    <!-- Privacy respecting Statcounter code for LeftValues http://leftvalues.github.io -->
    <script type="text/javascript">
        var sc_project = 12079783;
        var sc_invisible = 1;
        var sc_security = "f3285a9d";
        var sc_https = 1;
        if (navigator.doNotTrack != 1) {
            var statcounterscript = document.createElement('script');
            statcounterscript.setAttribute("type", "text/javascript");
            statcounterscript.setAttribute("src", "https://www.statcounter.com/counter/counter.js");
            document.getElementsByTagName("body")[0].appendChild(statcounterscript);
        }
    </script>
    <!-- End of Statcounter Code -->

    <!-- JavaScript for the test itself -->
    <script type="application/javascript" src="i18n.js"></script>
    <script>
        /* global i18n, loadTranslation, questions */
        let maxA, maxB, maxC, maxD, maxE, maxF, maxG // Max possible scores
        maxA = maxB = maxC = maxD = maxE = maxF = maxG = 0
        let a, b, c, d, e, f, g // User's scores
        a = b = c = d = e = f = g = 0
        let qn = [] // Array of question numbers
        let qi = 0 // Question index
        populateQn()
        let prevAnswer = null

        function initQuestion () {
        document.getElementById('question-text').innerHTML = i18n.getString(`question_${qn[qi]}`)
        document.getElementById('question-number').innerHTML = i18n.getString('quiz_question_of', {
            count: qi + 1,
            total: Object.size(questions)
        })
        if (prevAnswer == null) {
            document.getElementById('back_button').style.display = 'none'
            document.getElementById('back_button_off').style.display = 'block'
        } else {
            document.getElementById('back_button').style.display = 'block'
            document.getElementById('back_button_off').style.display = 'none'
        }
        }

        function nextQuestion (mult) { // eslint-disable-line no-unused-vars
        a += mult * questions[`question_${qn[qi]}`].a
        b += mult * questions[`question_${qn[qi]}`].b
        c += mult * questions[`question_${qn[qi]}`].c
        d += mult * questions[`question_${qn[qi]}`].d
        e += mult * questions[`question_${qn[qi]}`].e
        f += mult * questions[`question_${qn[qi]}`].f
        g += mult * questions[`question_${qn[qi]}`].g
        qi++
        prevAnswer = mult
        if (qn[qi] < Object.size(questions)) {
            initQuestion()
        } else {
            results()
        }
        }

        function prevQuestion () { // eslint-disable-line no-unused-vars
        if (prevAnswer == null) {
            return
        }
        qi--
        a -= prevAnswer * questions[`question_${qn[qi]}`].a
        b -= prevAnswer * questions[`question_${qn[qi]}`].b
        c -= prevAnswer * questions[`question_${qn[qi]}`].c
        d -= prevAnswer * questions[`question_${qn[qi]}`].d
        e -= prevAnswer * questions[`question_${qn[qi]}`].e
        f -= prevAnswer * questions[`question_${qn[qi]}`].f
        g -= prevAnswer * questions[`question_${qn[qi]}`].g
        prevAnswer = null
        initQuestion()
        }

        function calcScore (score, max) {
        return (100 * (max + score) / (2 * max)).toFixed(1)
        }

        function populateQn() {
            // Fill with incrementing numbers representing question numbers.
            for (let questionCount = 0; questionCount < Object.size(questions); questionCount++) {
                qn.push(questionCount)
            }
            // Shuffle qn
            for (let currentIndex = Object.size(questions) - 1; currentIndex > 0; currentIndex--) {
                randomIndex = Math.floor(Math.random() * currentIndex)
                
                // Swap question order
                let temp = qn[currentIndex]
                qn[currentIndex] = qn[randomIndex]
                qn[randomIndex] = temp
            }
        }

        function results () {
        window.location.href = 'results.html' +
                        `?a=${calcScore(a, maxA)}` +
                        `&b=${calcScore(b, maxB)}` +
                        `&c=${calcScore(c, maxC)}` +
                        `&d=${calcScore(d, maxD)}` +
                        `&e=${calcScore(e, maxE)}` +
                        `&f=${calcScore(f, maxF)}` +
                        `&g=${calcScore(g, maxG)}`
        }
        loadTranslation().then(() => {
        initQuestion()
        for (let i = 0; i < Object.size(questions); i++) {
            maxA += Math.abs(questions[`question_${i}`].a)
            maxB += Math.abs(questions[`question_${i}`].b)
            maxC += Math.abs(questions[`question_${i}`].c)
            maxD += Math.abs(questions[`question_${i}`].d)
            maxE += Math.abs(questions[`question_${i}`].e)
            maxF += Math.abs(questions[`question_${i}`].f)
            maxG += Math.abs(questions[`question_${i}`].g)
        }
        })
    </script>
</body>

</html>
